<script setup lang="ts">
import { isPhoneNumber, validateUnifiedCreditCode, validateEnterpriseName } from '@/utils/validate'
import type { FormRules } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'

interface Props {
  data?: Record<string, any> | never | null
  status?: string | never | null
}

const props = withDefaults(defineProps<Props>(), {
  data: null,
  status: '',
})

const baseFormRef = ref()

const form = reactive<Record<string, any>>({ enterpriseType: 1 })

const rules = reactive<FormRules>({
  type: [{ required: true, message: '类型不能为空!', trigger: 'blur' }],
  name: [
    { required: true, message: '企业名称不能为空!', trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!validateEnterpriseName(value)) {
          callback(new Error('请输入正确的企业名称'))
        } else {
          callback()
        }
      },
      trigger: ['blur'],
    },
  ],
  code: [
    { required: true, message: '统一社会信用代码不能为空!', trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!validateUnifiedCreditCode(value)) {
          callback(new Error('请输入正确的统一社会信用代码!'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  userName: [{ required: true, message: '负责人不能为空!', trigger: 'blur' }],
  userPhone: [
    { required: true, message: '负责人电话不能为空!', trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!isPhoneNumber(value)) {
          callback(new Error('请输入正确的电话号码!'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  address: [{ required: true, message: '联系地址不能为空!', trigger: 'blur' }],
})

const typeOptions = [
  {
    label: '企业',
    value: '1',
  },
  {
    label: '个人',
    value: '0',
  },
]

const initForm = () => {
  if (props.data) {
    Object.keys(props.data).forEach((key: string) => {
      form[key] = props.data![key]
    })
  }
}

const formatForm = () => {
  const result: Record<string, any> = {}
  if (form.enterpriseType == '1') {
    Object.keys(form).forEach((key: string) => {
      if (key != 'legalIdCard') {
        result[key] = form[key]
      }
    })
  } else {
    if (form.enterpriseType == '0') {
      Object.keys(form).forEach((key: string) => {
        if (key != 'enterpriseName' && key != 'unifiedCreditCode') {
          result[key] = form[key]
        }
      })
    }
  }

  return result
}

const submitForm = () => {
  return baseFormRef.value.submit(formatForm)
}

defineExpose({
  submitForm,
})

onMounted(() => {
  initForm()
})
</script>

<template>
  <div class="form-wrapper">
    <BaseForm
      ref="baseFormRef"
      :form="form"
      :rules="rules"
      width="400px"
      :attributes="{ 'label-width': '140px' }"
    >
      <el-form-item label="企业类型:" prop="type">
        <el-select v-model="form.type" placeholder="请选择类型" :disabled="props.status == 'edit'">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="企业名称:" prop="name">
        <el-input v-model="form.name" type="text" placeholder="请输入企业名称"> </el-input>
      </el-form-item>
      <el-form-item label="统一社会信用代码:" prop="code">
        <el-input v-model="form.code" type="text" placeholder="请输入统一社会信用代码"> </el-input>
      </el-form-item>
      <el-form-item label="负责人:" prop="userName">
        <el-input v-model="form.userName" type="text" placeholder="请输入负责人"> </el-input>
      </el-form-item>
      <el-form-item label="负责人电话:" prop="userPhone">
        <el-input v-model="form.userPhone" type="text" placeholder="请输入负责人电话"></el-input>
      </el-form-item>
      <el-form-item label="联系地址:" prop="address">
        <el-input v-model="form.address" type="text" placeholder="请输入联系地址"> </el-input>
      </el-form-item>
    </BaseForm>
  </div>
</template>

<style lang="scss" scoped>
.form-wrapper {
  width: 400px;
}
</style>
